<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <div class="Container100">
            <div class="ContainerIndent">
                <div class="ShadowBox whiteback GreenBorderedBox">
                    <div class="Container33 Responsive50">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">Overlay Panel</h1>
                            <h:form>
                                <p:commandButton id="imageBtn" value="Basic" style="margin-right: 10px;" type="button"/>
                                <p:overlayPanel id="imagePanel" for="imageBtn" hideEffect="fade">
                                    <p:graphicImage name="/demo/images/transformers.jpg" width="300" />
                                </p:overlayPanel>

                                <p:commandButton id="carBtn" value="Dynamic" style="margin-right: 10px;" type="button"/>
                                <p:overlayPanel id="carPanel" for="carBtn" hideEffect="clip" dynamic="true" style="width:600px">
                                    <p:dataTable var="car" value="#{dtSelectionView.cars2}" rows="5" paginator="true">
                                        <p:column headerText="Id">
                                            <h:outputText value="#{car.id}" />
                                        </p:column>

                                        <p:column headerText="Year">
                                            <h:outputText value="#{car.year}" />
                                        </p:column>

                                        <p:column headerText="Brand">
                                            <h:outputText value="#{car.brand}" />
                                        </p:column>

                                        <p:column headerText="Color">
                                            <h:outputText value="#{car.color}" />
                                        </p:column>
                                    </p:dataTable>
                                </p:overlayPanel>
                            </h:form>
                        </div>
                    </div>

                    <div class="Container33 Responsive50">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">Dialog</h1>
                            <h:form>
                                <p:panelGrid columns="3" layout="grid" style="border:0px none">
                                    <p:commandButton value="Basic" type="button" onclick="PF('dlg1').show();" />

                                    <p:commandButton value="Modal" type="button" onclick="PF('dlg2').show();" />

                                    <p:commandButton value="Effects" type="button" onclick="PF('dlg3').show();" />
                                </p:panelGrid>

                                <p:dialog header="Basic Dialog" widgetVar="dlg1" minHeight="40">
                                    <h:outputText value="Resistance to PrimeFaces is futile!" />
                                </p:dialog>

                                <p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" height="50">
                                    <h:outputText value="This is a Modal Dialog." />
                                </p:dialog>

                                <p:dialog header="Effects"
                                          widgetVar="dlg3"
                                          minimizable="true"
                                          maximizable="true"
                                          showEffect="explode"
                                          hideEffect="bounce"
                                          height="100">
                                    <h:outputText value="This dialog has nice effects." />
                                </p:dialog>
                            </h:form>
                        </div>
                    </div>

                    <div class="Container33 Responsive50">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">Confirm Dialog</h1>
                            <h:form>
                                <p:growl id="message" showDetail="true" />

                                <p:commandButton value="Confirm" actionListener="#{dialogView.destroyWorld}" update="message">
                                    <p:confirm header="Confirmation" message="Are you sure?" icon="ui-icon-alert" />
                                </p:commandButton>

                                <p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
                                    <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="fa fa-check Fs14 white" />
                                    <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="fa fa-close Fs14 white" />
                                </p:confirmDialog>
                            </h:form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Container100">
            <div class="ContainerIndent">
                <div class="ShadowBox whiteback GreenBorderedBox">
                    <div class="Container33 Responsive50">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">LightBox</h1>
                            <h:form>
                                <p:lightBox styleClass="imagebox" id="lighbox1">
                                    <h:outputLink value="resources/demo/images/megatron.jpg" title="Megatron">
                                        <p:graphicImage name="demo/images/megatron.jpg" style="height: 77px; width: auto; margin-right: 10px;" />
                                    </h:outputLink>

                                    <h:outputLink value="resources/demo/images/optimus.jpg" title="Optimus Prime">
                                        <p:graphicImage name="demo/images/optimus.jpg" style="height: 77px; width: auto; margin-right: 10px;" />
                                    </h:outputLink>

                                    <h:outputLink value="resources/demo/images/transformers.jpg" title="Transformers Age Of Extinction">
                                        <p:graphicImage name="demo/images/transformers.jpg" style="height: 77px; width: auto; margin-right: 10px;" />
                                    </h:outputLink>

                                    <h:outputLink value="resources/demo/images/bee.jpg" title="Bumblebee">
                                        <p:graphicImage name="demo/images/bee.jpg" style="height: 77px; width: auto; margin-right: 10px;" />
                                    </h:outputLink>
                                </p:lightBox>
                            </h:form>
                        </div>
                    </div>

                    <div class="Container33 Responsive50">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">Inline</h1>
                            <h:form>
                                <p:lightBox id="lighbox2">
                                    <h:outputLink value="#">
                                        <h:outputText value="Video Content" style="color: #9FADB5;"/>
                                    </h:outputLink>

                                    <f:facet name="inline">
                                        <p:media value="http://vimeo.com/moogaloop.swf?clip_id=87780794"  width="400" height="225" player="flash" />
                                    </f:facet>
                                </p:lightBox>
                            </h:form>
                        </div>
                    </div>

                    <div class="Container33 Responsive50">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">Iframe</h1>
                            <h:form>
                                <p:lightBox iframe="true" id="lighbox3" style="color: #9FADB5;">
                                    <h:outputLink value="http://www.primefaces.org" title="PrimeFaces HomePage">
                                        <h:outputText value="PrimeFaces HomePage" style="color: #9FADB5;"/>
                                    </h:outputLink>
                                </p:lightBox>
                            </h:form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>
